<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
            async,await的好处：简化异步代码的写法，尤其是异步代码之间涉及到数据传递嵌套的时候，让他们看起来简洁、像同步代码一样。
        */
        //    假设一个业务需要多个异步操作，每个异步操作要用到上一步骤的结果
        function takeLongTime(n) {
            return new Promise(reslove => {
                setTimeout(() => {
                    reslove(n + 200)
                }, n);
            })
        }

        // 模拟第一个异步请求
        function step1(n) {
            //`${n}`可以拿到形式参数
            console.log(`step1 with ${n}`);
            return takeLongTime(n)
        }

        // 模拟第二个异步请求
        function step2(n) {
            console.log(`step2 with ${n}`);
            return takeLongTime(n);
        }

        function step3(n) {
            console.log(`step3 with ${n}`);
            return takeLongTime(n);
        }

        // 使用promise的方法来实现三步骤处理
        function doIt() {
            // 开始记录程序运行时间
            console.time("doIt")
            const time1 = 300;
            step1(time1)
            .then(time2 => step2(time2))
            .then(time3 => step3(time3))
            .then(totalTime => {
                console.log(totalTime);
                // 结束记录方法运行时间
                console.timeEnd("doIt")
            })
        }
        doIt();

        // 使用await来进行改进 简洁一些 看起来更像同步代码
        async function doIt2(time){
            console.time("doIt2")
           const time2 =  await step1(time);
           const time3 = await step2(time2);
           const totalTime = await step3(time3)
           console.timeEnd('doIt2')
        }
        doIt2(300)
    </script>
</body>

</html>